<template>
  <!-- 专车筛选 -->
  <div>
    <van-popup v-model="isShow" position="right" @click-overlay="close" :style="{ width: '80%',height: '100%'}">
      <div class="top">
        <header>{{$t('m.screen')}}</header>
      </div>
      <div class="content">
        <div class="content-text">
          <el-form label-position="top" label-width="80px" :model="formLabelAlign" size="mini">
            <el-form-item :label="$t('cArroval.applyDate')">
              <el-button type="primary" round plain @click="handleStartDate">{{formLabelAlign.applicationStartTime.length === 5 || formLabelAlign.applicationStartTime === '' ? 'Start':formLabelAlign.applicationStartTime}}</el-button>
              <span style="padding: 0 2.778vw">~</span>
              <el-button type="warning" round plain @click="handleEndDate">{{formLabelAlign.applicationEndTime.length === 3 || formLabelAlign.applicationEndTime === '' ? 'End':formLabelAlign.applicationEndTime}}</el-button>
            </el-form-item>
            <el-form-item :label="$t('cArroval.approvalDate')">
              <el-button type="primary" round plain @click="handleApplyStart">{{formLabelAlign.approvalStartTime.length === 5 || formLabelAlign.approvalStartTime === '' ? 'Start':formLabelAlign.approvalStartTime}}</el-button>
              <span style="padding: 0 2.778vw">~</span>
              <el-button type="warning" round plain @click="handleApplyEnd">{{formLabelAlign.approvalEndTime.length === 3 || formLabelAlign.approvalEndTime === '' ? 'End':formLabelAlign.approvalEndTime}}</el-button>
            </el-form-item>
            <el-form-item :label="$t('cArroval.dPrice')">
              <template slot="label">
                <label class="padding-right">{{$t('cArroval.dPrice')}}</label>
              </template>
              <el-select v-model="formLabelAlign.estimatedFreight" :placeholder="$t('m.choose')">
                <el-option
                    label="全部"
                    :value="1">
                </el-option>
                <el-option
                    label="2万及以下"
                    :value="3">
                </el-option>
                <el-option
                    label="2万以上"
                    :value="2">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('cArroval.carrier')">
              <template slot="label">
                <label class="padding-right">{{$t('cArroval.carrier')}}</label>
              </template>
              <el-select v-model="formLabelAlign.carrier" :placeholder="$t('m.choose')">
                  <el-option
                    v-for="(item,index) in carrier"
                    :key="index"
                    :label="item"
                    :value="item">
                  </el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('cArroval.state')">
              <template slot="label">
                <label class="padding-right">{{$t('cArroval.searchTransportType')}}</label>
              </template>
              <el-select v-model="formLabelAlign.searchTransportType" placeholder="请选择">
                <el-option
                    v-for="item in searchTransportTypes"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('cArroval.state')">
              <template slot="label">
                <label class="padding-right">{{$t('cArroval.state')}}</label>
              </template>
              <el-select v-model="formLabelAlign.state" placeholder="请选择">
                  <el-option
                    v-for="item in state"
                    :key="item.id"
                    :label="$t(item.name)"
                    :value="item.id">
                  </el-option>
                </el-select>
            </el-form-item>
            <el-form-item :label="$t('cArroval.aog')">
              <template slot="label">
                <label class="padding-right">{{$t('cArroval.aog')}}</label>
              </template>
               <el-select v-model="formLabelAlign.aog" :placeholder="$t('m.choose')">
                 <el-option :label="$t('m.all')" :value="-1"></el-option>
                 <el-option :label="$t('m.itemName')" :value="0"></el-option>
                 <el-option :label="$t('m.aog')" :value="1"></el-option>
               </el-select>
            </el-form-item>
            <el-form-item :label="$t('cArroval.applyBatch')">
              <el-input v-model="formLabelAlign.applyBatch"></el-input>
            </el-form-item>
            <el-form-item :label="$t('cArroval.applicationUnit')">
              <el-input v-model="formLabelAlign.applicationUnit"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="bottom">
        <div>
          <el-button plain @click="close(1)">{{$t('btn.reset')}}</el-button>
          <el-button type="primary" @click="search">{{$t('btn.ok')}}</el-button>
        </div>
      </div>
    </van-popup>
    <!-- 日期选择器 -->
    <div class="time" v-if="dateShow">
      <van-datetime-picker
          v-model="currentDate"
          type="date"
          :title="$t('m.chooseDate')"
          @confirm="confirm"
          @cancel="cancel"
      />
    </div>
  </div>
</template>

<script>
import { format,approvalState } from "@/assets/js/common"
import { $carApplication } from '@/api/transport'
import { getToday } from "@/assets/js/common"

export default {
  // 组件属性、变量
  props: {
    show: {
      type: Boolean,
      default() {
        return false
      }
    }
  },
  // 变量
  data() {
    return {
      dateShow: false,
      currentDate: new Date(),
      formLabelAlign: {
        applicationStartTime: 'Start',
        applicationEndTime: 'End',
        approvalStartTime: 'Start',
        approvalEndTime: 'End',
        applyBatch: '',
        applicationUnit: '',
        carrier: '',
        state: -5,
        aog: -1,
        searchTransportType: undefined,
        estimatedFreight: 1
      },
      timeTile: '', // 当前选择日期的名字
      carrier: [],
      state: approvalState[0],
      searchTransportTypes: [
        {
          label: '专车运输',
          value: 1
        },
        {
          label: '非危险品零担运输',
          value: 2
        },
        {
          label: '危险品零担运输',
          value: 3
        }
      ],
      showChecked: false,
      carrierJiantou: 'el-icon-arrow-right',
      stateJiantou: 'el-icon-arrow-right',
      aog: 'el-icon-arrow-right',
      showAog: false,
      showState: false,
      user: ''
    }
  },
  computed: {
    isShow: {
      get () {
        return this.show
      },
      set () {}
    }
  },
  // 方法
  methods: {
    // 关闭
    close(value) {
      if(value === 1) {
        this.formLabelAlign = this.$options.data().formLabelAlign
      }
      this.$emit('handleClose', value, this.formLabelAlign)
    },
    // 查询
    search() {
      let obj = this.formLabelAlign
      const searchObj = {
        applicationStartTime: obj.applicationStartTime.length !== 5 && obj.applicationStartTime !== '' ? obj.applicationStartTime+' 00:00:00':'',
        applicationEndTime: obj.applicationEndTime.length !== 3 && obj.applicationEndTime !== '' ? obj.applicationEndTime+' 23:59:59':'',
        approvalStartTime: obj.approvalStartTime.length !== 5 && obj.approvalStartTime !== '' ? obj.approvalStartTime+' 00:00:00':'',
        approvalEndTime: obj.approvalEndTime.length !== 3 && obj.approvalEndTime !== '' ? obj.approvalEndTime+' 23:59:59':'',
        applicationUnit: obj.applicationUnit,
        applyBatch: obj.applyBatch,
        carrier: obj.carrier,
        state: obj.state,
        aog: obj.aog,
        searchTransportType: obj.searchTransportType,
        estimatedFreight: obj.estimatedFreight
      }
      if (this.user === 'user') searchObj.searchTransportType = 1
      this.$emit('handleOk',searchObj)
      this.close()
    },
    cancel() {
      this.dateShow = false
    },
    confirm() {
      switch (this.timeTile) {
        case '申请开始日期':
          this.formLabelAlign.applicationStartTime = format(this.currentDate)
          break;
        case '申请结束日期':
          this.formLabelAlign.applicationEndTime = format(this.currentDate)
          break;
        case '审批开始日期':
          this.formLabelAlign.approvalStartTime = format(this.currentDate)
          break;
        case '审批结束日期':
          this.formLabelAlign.approvalEndTime = format(this.currentDate)
          break;
      }
      this.dateShow = false
    },
    handleStartDate() {
      this.dateShow = true
      this.timeTile = '申请开始日期'
      if (this.formLabelAlign.applicationStartTime && this.formLabelAlign.applicationStartTime !== 'Start') {
        this.currentDate = new Date(this.formLabelAlign.applicationStartTime)
      } else {
        this.currentDate = new Date()
      }
    },
    handleEndDate() {
      this.dateShow = true
      this.timeTile = '申请结束日期'
      if (this.formLabelAlign.applicationEndTime && this.formLabelAlign.applicationEndTime !== 'End') {
        this.currentDate = new Date(this.formLabelAlign.applicationEndTime)
      } else {
        this.currentDate = new Date()
      }
    },
    handleApplyStart() {
      this.dateShow = true
      this.timeTile = '审批开始日期'
      if (this.formLabelAlign.approvalStartTime && this.formLabelAlign.approvalStartTime !== 'Start') {
        this.currentDate = new Date(this.formLabelAlign.approvalStartTime)
      } else {
        this.currentDate = new Date()
      }
    },
    handleApplyEnd() {
      this.dateShow = true
      this.timeTile = '审批结束日期'
      if (this.formLabelAlign.approvalEndTime && this.formLabelAlign.approvalEndTime !== 'End') {
        this.currentDate = new Date(this.formLabelAlign.approvalEndTime)
      } else {
        this.currentDate = new Date()
      }
    },
    // 获取承运人
    findAllagentCode() {
      $carApplication
        .findAllagentCode()
        .then(res => {
          this.carrier = res.data
        })
        .catch(err => this.$msg.fail(err.message || err.msg || '获取承运人人失败'))
    },
    // 时间重置
    getTime() {
      const dayArr = getToday()
      this.formLabelAlign.applicationStartTime = dayArr[0]
      this.formLabelAlign.applicationEndTime = dayArr[1]
      this.formLabelAlign.approvalStartTime = dayArr[0]
      this.formLabelAlign.approvalEndTime = dayArr[1]
    }
  },
  // 生命周期函数
  created() {
    this.findAllagentCode()
    this.user = sessionStorage.getItem('accountType')
    if (this.user === 'user') {
      this.searchTransportTypes = this.searchTransportTypes.slice(0, 1)
    }
  },
  mounted() {
    // 初始化时间
    this.getTime()
  }
}
</script>

<style scoped src="@/assets/css/transport/choose.css">

</style>
